<template>
  <v-app :dark="dark">
    <!-- 左侧导航条 -->
    <v-navigation-drawer
      :dark="dark"
      persistent
      :mini-variant="miniVariant"
      v-model="drawer"
      enable-resize-watcher
      fixed
      app
    >
      <v-toolbar flat class="transparent">
        <v-list class="pa-0">
          <v-list-tile avatar>
            <v-list-tile-avatar>
              <img v-if="userinfo.headImg" :src="userinfo.headImg">
              <img v-else src="../assets/2.jpeg">
            </v-list-tile-avatar>
            <v-list-tile-content>
              <v-list-tile-title>{{userinfo.username}}</v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>
        </v-list>
      </v-toolbar>
      <v-divider/>
      <!-- 左侧菜单 -->
      <v-list class="pt-0" dense>
        <v-list-group
          v-for="item in items"
          :key="item.title"
          :prepend-icon="item.action"
          no-action
        >
          <!--一级菜单 -->
          <v-list-tile slot="activator">
            <v-list-tile-content>
              <v-list-tile-title>{{ item.title }}</v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>
          <!-- 二级菜单 -->
          <v-list-tile v-for="subItem in item.items" :key="subItem.title" :to="subItem.path">
            <v-list-tile-content>
              <v-list-tile-title>{{ subItem.title }}</v-list-tile-title>
            </v-list-tile-content>
            <v-list-tile-action>
              <v-icon>{{ subItem.action }}</v-icon>
            </v-list-tile-action>
          </v-list-tile>
        </v-list-group>
      </v-list>
    </v-navigation-drawer>
    <!-- 顶部工具条 -->
    <v-toolbar
      app
      dark
      :color="dark ? 'secondary' : 'primary'"
    >
      <!-- 隐藏左侧菜单的按钮-->
      <v-toolbar-side-icon @click.stop="drawer = !drawer"/>
      <!-- 收起左侧菜单的按钮-->
      <v-btn icon @click.stop="miniVariant = !miniVariant">
        <v-icon v-html="miniVariant ? 'chevron_right' : 'chevron_left'"/>
      </v-btn>
      <!-- 切换黑暗主题 -->
      <v-flex xs1>
        <v-switch
          :label="dark ? '暗黑' : '明亮'"
          v-model="dark"
          color="dark"
          hide-details
        />
      </v-flex>
      <!-- 顶部导航标题 -->
      <v-flex xs3></v-flex>
      <v-toolbar-title v-text="title"/>
      <v-spacer/>

      <!-- 调色板 -->
      <v-btn icon @click.stop="dark = !dark">
        <v-icon>invert_colors</v-icon>
      </v-btn>
      <!-- 顶部导航用户菜单 -->
      <v-btn icon @click="updateUser">
        <v-icon>account_box</v-icon>
      </v-btn>
      <v-btn icon @click="logoutConfirm">注销</v-btn>
    </v-toolbar>
    <!--中间内容主体-->
    <v-content>
      <v-breadcrumbs>
        <v-icon slot="divider">chevron_right</v-icon>
        <v-breadcrumbs-item>{{item1}}</v-breadcrumbs-item>
        <v-breadcrumbs-item>{{item2}}</v-breadcrumbs-item>
      </v-breadcrumbs>
      <div>
        <!--定义一个路由锚点，Layout的子组件内容将在这里展示-->
        <router-view/>
      </div>
    </v-content>

    <v-dialog v-model="show" max-width="700px" persistent scrollable>
        <v-card>
            <!--对话框的标题-->
              <v-toolbar dense dark color="primary">
              <v-toolbar-title>修改用户信息</v-toolbar-title>
              <v-spacer/>
              <!--关闭窗口的按钮-->
              <v-btn icon @click="show=false"><v-icon>close</v-icon></v-btn>
            </v-toolbar>
            <v-card-text class="px-3" style="height: 450px">
                <v-form ref="basic">
                  <v-layout row>
                    <v-flex xs3>
                      <span style="font-size: 16px; color: #444">头像：</span>
                    </v-flex>
                    <v-flex>
                      <v-upload v-model="userinfo.headImg" url="/item/upload/image" :multiple="false" :pic-width="100" :pic-height="100"/>
                    </v-flex>
                    <v-spacer/>
                    <v-flex xs5>
                      <v-text-field v-model="userinfo.adress" label="联系地址：" />
                    </v-flex>
                  </v-layout>
                  <v-layout row>
                    <v-flex xs5>
                      <v-text-field v-model="userinfo.username" label="用户名：" />
                    </v-flex>
                    <v-spacer/>
                    <v-flex xs5>
                      <v-text-field v-model="userinfo.phone" label="手机号：" />
                    </v-flex>
                  </v-layout>
                  <v-layout row>
                    <v-flex xs5>
                      <v-text-field v-model="userinfo.password" label="密码：" />
                    </v-flex>
                    <v-spacer/>
                    <v-flex xs5>
                      <v-text-field v-model="userinfo.name" label="真实姓名：" />
                    </v-flex>
                  </v-layout>
                  <v-layout row>
                    <v-flex xs5>
                      <v-text-field v-model="userinfo.birthDate" type="date" label="出生日期：" />
                    </v-flex>
                    <v-spacer/>
                    <v-flex xs5>
                      <v-radio-group v-model="userinfo.sex"  row>
                        <v-radio label="保密" value="0"></v-radio>
                        <v-radio label="男" value="1"></v-radio>
                        <v-radio label="女" value="2"></v-radio>
                      </v-radio-group>
                    </v-flex>
                  </v-layout>
                 </v-form>
            </v-card-text>
            <v-card-actions>
                <v-spacer/>
                <v-btn color="blue darken-1" flat @click.native="show=false">取消</v-btn>
                <v-btn color="blue darken-1" flat @click.native="save">保存</v-btn>
            </v-card-actions>
        </v-card>
     </v-dialog>
  </v-app>
</template>

<script>
  // import menus from "../menu";
  import {Message} from 'element-ui';

  export default {
    beforeCreate(){
      let token = this.$storeGet("L_TOKEN");
      if(token == null || token == ""){
        location.href="/";
        return;
      }
      this.$http.get("/auth/verify",{headers:{"x-authorize-token":token}}).then((resp) => {
        if(resp.data.code == 1){
            let token = resp.headers['x-authorize-jwt'];
            this.$storeSet("L_TOKEN",token);
            this.$storeSet("L_USERINFO",resp.data.data);
            this.getMenuInfo(token);
            this.getUserInfo(token);
        }else{
          Message({
            showClose: true,
            message: resp.data.message,
            type: 'error',
            duration:1500,
            onClose:function () {
              location.href="/";
            }
          });
        }
      }).catch(() => {
        this.$message.error("服务器异常");
      });
    },
    data() {
      return {
        dark: false,// 是否暗黑主题
        drawer: true,// 左侧导航是否隐藏
        miniVariant: false,// 左侧导航是否收起
        title: '乐优商城后台管理',// 顶部导航条名称,
        menuMap: {},
        show:false,
        items:[],
        userinfo:{}
      }
    },
    name: 'App',
    computed: {
      item1() {
        const arr = this.$route.path.split("/");
        return this.menuMap[arr[1]].name;
      },
      item2() {
        const arr = this.$route.path.split("/");
        const url = arr[1]+"/"+arr[2];
        return this.menuMap[arr[1]][url];
      }
    },
    created() {

    },
    methods:{
      getMenuInfo(token){
        this.$http({
          method: 'get',
          url: '/user/author/query/menu',
          headers: {"x-authorize-token":token},
        }).then((resp) => {
          if(resp.data.code == 1){
            this.items=resp.data.data;
            resp.data.data.forEach(m => {
              const p1 = m.path.slice(1);
              this.menuMap[p1] = {name: m.title};
              m.items.forEach(i => {
                this.menuMap[p1][i.path.slice(1)] = i.title;
              })
            })
          }else{
            this.$message.error(resp.data.message);
          }
        }).catch(() => {
          this.$message.error("服务器异常");
        });
      },
      getUserInfo(token){
        this.$http({
          method: 'get',
          url: '/user/query/user/info',
          headers: {"x-authorize-token":token},
        }).then((resp) => {
          if(resp.data.code == 1){
            this.userinfo=resp.data.data;
          }else{
            this.$message.error(resp.data.message);
          }
        }).catch(() => {
          this.$message.error("服务器异常");
        });
      },
      logoutConfirm(){
        this.$message.confirm('确定退出登录吗?', '提示', {
          confirmButtonText: '确定退出',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.logout();
        }).catch(()=>{
          this.$message.info('已取消');
        })
      },
      logout(){
        this.$http({
          method: 'get',
          url: '/auth/logout',
          headers: {"x-authorize-token":this.$storeGet("L_TOKEN")},
        }).then((resp) => {
          location.href="/";
        }).catch(() => {
          this.$message.error("服务器异常");
        });
      },
      updateUser(){
        this.show=true;
        this.userinfo.password=null;
      },
      save(){
        console.log(this.userinfo);
        this.$http({
          method: 'put',
          url: '/user/update/myinfo',
          data:this.userinfo,
          headers: {"x-authorize-token":this.$storeGet("L_TOKEN")},
        }).then((resp) => {
          if(resp.data.code == 1){
            // 关闭窗口
            this.show = false;
            this.$message.success("保存成功！");
          }else{
            this.$message.error(resp.data.message);
          }
        }).catch(() => {
          this.$message.error("服务器异常");
        });
      }
    }
  }
</script>

<style scoped>
  .box {
    width: 90%;
  }
</style>
